<template>
	<view class="container">
		<fui-nav-bar title="桌子"></fui-nav-bar>
		<view class="fui-filter__bar">
			<view class="fui-flex__1">
				<fui-dropdown-menu :size="28" selectedColor="#465CFF" :options="distOptions" @click="rangeItemClick" @close="rangeClose" ref="ddmRange">
					<view class="fui-filter__item" @tap="filterTap">
						<text>{{ range }}</text>
						<view class="fui-filter__icon" :class="{ 'fui-icon__ani': rangeShow }">
							<fui-icon name="turningdown" :size="32"></fui-icon>
						</view>
					</view>
				</fui-dropdown-menu>
			</view>
		</view>
		<template v-for="item of nearbyTableList" :key="item.uid">
			<my-desk-list :storeName="item.name" :location="item.address" :phone="item.telephone" :uid="item.uid"></my-desk-list>
		</template>
		<fui-empty v-show="length == 0" src="../../static/empty-icon/empty.png" title="暂无数据" width="200" height="200" isFixed></fui-empty>
		<!-- <tabbar ref="tabbar"></tabbar> -->
	</view>
</template>

<script>
import { defineComponent, reactive, toRefs, ref, onMounted } from 'vue';
import { getDeskList, getDeskMap } from '@/request/modules/desk.js';
import { showMsg } from '../../utils/interact';

export default defineComponent({
	name: 'desk',
	setup() {
		const state = reactive({
			distOptions: [
				{
					text: '500米',
					value: '500',
					checked: true
				},
				{
					text: '1000米',
					value: '1000'
				},
				{
					text: '1500米',
					value: '1500'
				}
			],
			range: '500米',
			sortShow: false,
			rangeShow: false,
			nearbyTableList: [],
			length: 0
		});

		// 组件实例
		const ddmRange = ref(null); // 添加一个 ref 来存储 dropdown-menu 的 DOM 引用
		// 非响应式变量
		let latitude = 0;
		let longitude = 0;
		let distance = '500'; //默认500米
		// 下拉选择距离的点击回调
		const rangeItemClick = (e) => {
			state.range = e.text; //点谁显示谁
			distance = e.value; //更新距离
			getNearDeskList(latitude, longitude, distance); //发请求更新数据
			state.rangeShow = false;
		};
		//关闭下拉选项框的回调
		const rangeClose = () => {
			state.rangeShow = false;
		};
		// 点击筛选按钮
		const filterTap = () => {
			ddmRange.value.show();
			state.rangeShow = true;
		};

		onMounted(() => {
			uni.getLocation({
				type: 'wgs84', // 返回可以用于uni.openLocation的经纬度
				geocode: true,
				success: function (res) {
					latitude = res.latitude;
					longitude = res.longitude;
					//请求附近桌子信息
					getNearDeskList(latitude, longitude, distance);
				},
				fail: function (e) {
					console.error('获取位置信息失败：' + JSON.stringify(e));
					showMsg('获取定位失败');
				}
			});
		});

		//请求接口
		//请求附近桌台列表
		async function getNearDeskList(latitude, longitude, distance) {
			const res = await getDeskList({
				latitudeAndLongitude: latitude + ',' + longitude,
				radius: distance
			});
			if (res.statusCode !== 200) return showMsg();
			state.nearbyTableList = res.data.results;
			state.length = state.nearbyTableList.length;
		}
		return {
			...toRefs(state),
			ddmRange,
			rangeItemClick,
			filterTap,
			rangeClose
		};
	},
	onShow() {
		// uni.hideTabBar();
	}
});
</script>

<style scoped lang="scss">
.container {
	padding-bottom: 100rpx;
	.fui-section__title {
		margin-left: 32rpx;
	}

	.fui-filter__bar {
		width: 100%;
		height: 88rpx;
		display: flex;
		align-items: center;
		background-color: #fff;
	}

	.fui-filter__item {
		width: 350rpx;
		height: 88rpx;
		display: flex;
		padding-left: 10px;
		align-items: center;
		font-size: 30rpx;
		/* #ifdef H5 */
		cursor: pointer;
		/* #endif */
	}
	.fui-icon__ani {
		transform: rotate(180deg);
	}
	.fui-filter__icon {
		transition: all 0.15s linear;
	}

	.deskCard {
		font-size: 24rpx;
		.info {
			width: 100%;
			.title {
				font-size: 32rpx;
				text {
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					display: -webkit-box;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
			.rate {
				margin: 10rpx 0rpx;
			}
			.address {
				font-size: 24rpx;
				color: gray;
			}
			.large {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 10rpx;
				padding: 0rpx 20%;
				box-sizing: border-box;
				.navigation .phone {
					width: 300rpx;
					height: 60rpx;
				}
			}
		}
	}
}
</style>
